<template>
  <el-form ref="postForm" :model="postForm" :rules="rules">
    <sticky class-name="sub-navbar">
      <el-button v-if="!isEdit" @click="showGuide">显示帮助</el-button>
      <el-button
        v-loading="loading"
        type="success"
        @click="submitForm"
      >{{ isEdit?'编辑电子书':'新增电子书' }}</el-button>
    </sticky>
    <div class="detail-container">
      <Warning />

      <el-row>
        <el-col :span="24">
          <ebook-upload
            :file-list="fileList"
            :disabled="isEdit"
            @before-upload="beforeUpload"
            @on-success="onUploadSuccess"
            @on-remove="onUploadRemove"
          />
        </el-col>
        <el-col :span="24">
          <!-- 电子书表单 -->
          <el-form-item prop="title">
            <MDinput
              v-model="postForm.title"
              :maxlength="100"
              name="name"
              required
            >
              书名
            </MDinput>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="作者"
                prop="author"
                :label-width="labelWidth"
              >
                <el-input v-model="postForm.author" placeholder="作者" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="出版社"
                prop="publisher"
                :label-width="labelWidth"
              >
                <el-input v-model="postForm.publisher" placeholder="出版社" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="语言"
                :label-width="labelWidth"
                prop="language"
              >
                <el-input v-model="postForm.language" placeholder="语言" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="根文件"
                :label-width="labelWidth"
                prop="rootFile"
              >
                <el-input
                  v-model="postForm.rootFile"
                  placeholder="根文件"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="文件路径"
                :label-width="labelWidth"
                prop="filePath"
              >
                <el-input
                  v-model="postForm.filePath"
                  placeholder="文件路径"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="解压路径"
                :label-width="labelWidth"
                prop="unzipPath"
              >
                <el-input
                  v-model="postForm.unzipPath"
                  placeholder="解压路径"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="封面路径"
                :label-width="labelWidth"
                prop="coverPath"
              >
                <el-input
                  v-model="postForm.coverPath"
                  placeholder="封面路径"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="文件名称"
                :label-width="labelWidth"
                prop="fileName"
              >
                <el-input
                  v-model="postForm.fileName"
                  placeholder="文件名称"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item
                label="封面"
                :label-width="labelWidth"
                prop="cover"
              >
                <a v-if="postForm.cover" :href="postForm.cover" target="_blank">
                  <img :src="postForm.cover" class="preview-img">
                </a>
                <span v-else>无</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="目录" :label-width="labelWidth">
                <div v-if="contentsTree && contentsTree.length > 0" class="contents-wrapper">
                  <el-tree />
                </div>
                <span v-else>无</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </el-form>
</template>

<script>
import Sticky from '../../../components/Sticky'
import Warning from './Warning.vue'
import EbookUpload from '../../../components/EbookUpload'
import MDinput from '../../../components/MDinput/index'

const defaultForm = {
  title: '', // 书名
  author: '', // 作者
  publisher: '', // 出版社
  language: '', // 语种
  rootFile: '', // 根文件路径
  cover: '', // 封面图片URL
  coverPath: '', // 封面图片路径
  fileName: '', // 文件名
  originalName: '', // 文件原始名称
  filePath: '', // 文件所在路径
  unzipPath: '', // 解压文件所在路径
  contents: [], // 目录
}

// 字段映射
const fieldMap = {
  title: '书名',
  author: '作者',
  publisher: '出版社',
  language: '语言'
}

export default {
  components: {
    Sticky,
    Warning,
    EbookUpload,
    MDinput,
  },
  props: {
    isEdit: Boolean,
  },
  data() {
    const validateRequire = (rule, value, cb) => {
      // 不论成功或失败都要执行 cb
      if (value && value.length === 0) {
        cb(new Error(fieldMap[rule.field] + '必须填写'))
      } else {
        cb()
      }
    }
    return {
      loading: false,
      postForm: Object.assign({}, defaultForm),
      fileList: [],
      contentsTree: [],
      labelWidth: '120px',
      rules: {
        // 可提供多个validator 来定义不同的检查规则
        title: [{ validator: validateRequire }, {}],
        author: [{ validator: validateRequire }],
        publisher: [{ validator: validateRequire }],
        language: [{ validator: validateRequire }]
      }
    }
  },
  mounted() {
    console.log(111)
  },
  methods: {
    onUploadSuccess() {
      throw new Error('选择标识无效')
    },
    onUploadRemove() {
      console.log('remove')
    },
    submitForm() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    showGuide() {
      console.log('show loading')
    },
    beforeUpload() {

    }
  },
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';

.detail {
  position: relative;
  .detail-container {
    padding: 40px 45px 20px 50px;
    .preview-img {
      width: 200px;
      height: 270px;
    }
    .contents-wrapper {
      padding: 5px 0;
    }
  }
}
</style>